<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>GARMOR</title>
      <!-- don't forget to paste your page title! -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="" />
      <meta name="author" content="" />
      <!-- Le styles -->
      <!-- bootstrap framework styles -->
      <link href="css/bootstrap.css" rel="stylesheet" />
      <!-- fancybox lightbox clone plugin styles -->
      <link href="css/fancybox.css" rel="stylesheet" />
      <!-- icomoon icons font  -->
      <link href="css/icomoon.css" rel="stylesheet" />
      <!-- sequence slider styles -->
      <!--[if lt IE 8]>
      <link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs_ie.css" />
      <![endif]-->
      <link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs.css" />
      <!-- main template styles -->
      <link href="css/styles.css" rel="stylesheet" />
      <!-- place for your custom styles -->
      <link href="css/mystyle.css" rel="stylesheet" />
      <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
      <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
   </head>
   <body class="">
      <!-- Backround image. Just paste yours. No extra code. Highly recommend to use your own images -->
      <!-- background images by Victor1558 under CC BY 2.0 license -> http://www.flickr.com/photos/76029035@N02/ -->

      <img src="img/bg14.jpg" id="bg_main" alt="" />
      <!--recommended image dimentions 1200x800px with weight under 120kb 
         !note! don't use very light images. It can damage readability of the white text -->
      <div class="container">
         <!-- Main navigation -->
         <div class="row">
            <div class="span12">
               <div class="navbar">
               
               </div>
            </div>
         </div>
         <!-- /Main navigation -->
         <header class="page_title">
            <h1>Proyectos</h1>
         </header>
         <div id='portfolioContainer' class="row">
            <div id="news">
			

            </div>



         </div>
         <section class="main">
            <!-- main footer -->
            <footer class="main">
               <div class="row">
                  <div class="span8">
                     <!-- footer main nav -->
                    <nav>
                        <ul>
                           <li><a href="index.html">Inicio</a></li>
                           <li><a href="projects.html">Proyectos</a></li>
                           <li><a href="clients.html">Clientes</a></li>
                           <li><a href="about.html">Nosotros</a></li>
                           <li><a href="services.html">Servicios</a></li>
                           <li><a href="catalog.html">Cat&aacute;logo</a></li>
                           <li><a href="contact.html">Contacto</a></li>
                        </ul>
                     </nav>
                  </div>
                  <div class="span4">
                     <small>© <a href="index.html">Garmor</a> 2012</small>
                  </div>
               </div>
            </footer>
         </section>
      </div>
      <!-- /container --><!-- Le javascript
         ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      <script src="js/jquery.js"></script>
      <!-- Bootstrap Framework script -->
      <script src="js/bootstrap.js"></script>
      <script> $(function() { $('.carousel').carousel() }); </script>
      <script type="text/javascript">
         $("[rel=tooltip]").tooltip();
      </script>
      <!-- plugin for background images -->
      <script src="js/bg_image.js"></script>
      <!-- Fancybox plugin -->
      <script type="text/javascript" src="js/fancybox.js"></script>
      <script type="text/javascript" src="js/navbar.js"></script>
      <script type="text/javascript">
         $(".portfolio").addClass('active');
      </script>

      <script type="text/javascript">
         var params = {
            'method' : 'GetAllProjects'
         };

         $.ajax({
            type: "POST",
            url: "/server/php/handler.php",
            dataType: "json",
            //url: "/GARMOR/trunk/web/server/php/handler.php",
            data: params,
            success: function(data, statusCode, jqXHRObj){
               var projects = data;
               
               for(i = 0; i < projects.length; i++){
                  var portfolioItemId = "Item-"+i;         
                  var portfolioItem = "<div class='span6' id='"+portfolioItemId+"'></div>"
                  
                  $('#portfolioContainer').append(portfolioItem);
                  
                  var portfolioLinkId = "Link-"+portfolioItemId;
                  var portfolioItemLink = "<a href='portfolio_page.html?id=" + projects[i].projectId + "' class='hover_image block' id='"+portfolioLinkId+"' style='height:350px'></a> "

                  var selectorItemId = "#"+portfolioItemId;
                  var selectorLinkId = "#"+portfolioLinkId;
                  
                  $(selectorItemId).append(portfolioItemLink);
                  
                  var portfolioItemImage;

                  for(var j = 0; j < projects[i].images.length; j++){
                     if(projects[i].images[j].IsPortrait == 1){
                        portfolioItemImage = "<img src='" + projects[i].images[j].ImageURL + "' style='width:570px;'/>";                        
                     }
                  }
                  
                  $(selectorLinkId).append(portfolioItemImage);
                  
                  var portfolioSpan1 = "<span class='icomoon-anchor icon_hover'></span>";
                  var portfolioSpan2 = "<span class='mask'></span>";
                  
                  $(selectorLinkId).append(portfolioSpan1);
                  $(selectorLinkId).append(portfolioSpan2);
                  
                  portfolioDiv1Id = "portdiv-"+i;
                  selectorPortDivId = "#"+portfolioDiv1Id;
                  
                  var portfolioDiv1 = "<div class='desc' id='"+portfolioDiv1Id+"'></div>"
                  
                  $(selectorLinkId).append(portfolioDiv1);
                  
                  var portHeader = "<h5>"+projects[i].projectName+"</h5>";
                  var portPar = "<p>"+projects[i].projectDescription+"</p>" ;
                  
                  if(projects[i].projectStart==""){
                     projects[i].projectStart = "En progreso";
                  }
                  
                  var fechas = "<p>Duracion del proyecto: "+projects[i].projectStart+" - "+projects[i].projectEnd+"</p>"
                  
                  $(selectorPortDivId).append(portHeader);
                  $(selectorPortDivId).append(portPar);
                  $(selectorPortDivId).append(fechas);
                  
                  $("#" + portfolioLinkId).click(function(){
                     watch(projects[i].projectId);
                  });
                  
               }
            },
            error: function(error){
               console.log(error);
            },
            complete: function(){
               
            }
         });
      </script>
      <!-- Sequence slider plugin -->
      <script type="text/javascript" src="js/sequence.jquery-min.js"></script>
   </body>
</html>